<script setup lang="ts">
import { ref, onMounted } from 'vue'
import editorDialog from './editor.vue'
import { bus } from '@/utils/mitt.js'
import {
  getCompanyNameAPI,
  changeCompanyNameAPI,
} from '@/http/swiperCompanyInfo'
import { ElMessage } from 'element-plus'
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()
const EditorDialogRef = ref()
const openEditor = (id: number) => {
  if (userStore.identity == '用户') return ElMessage.error('您无权进行修改！')
  bus.emit('editorTitle', id)
  EditorDialogRef.value.open()
}
// 获取公司名称
const getCompanyName = ref()
const getCompanyNameData = async () => {
  const res = await getCompanyNameAPI()
  getCompanyName.value = res[0].set_value
}
// 修改公司名称
const changeCompanyName = async () => {
  if (userStore.identity == '用户') return ElMessage.error('您无权进行修改！')
  const res = await changeCompanyNameAPI(getCompanyName.value)
  ElMessage({
    type: res.status === 0 ? 'success' : 'error',
    message: res.status === 0 ? `${res.message}` : '修改失败！',
  })
  getCompanyNameData()
}
onMounted(() => {
  getCompanyNameData()
})
</script>

<template>
  <el-form>
    <el-form-item label="公司名称">
      <el-input
        v-model="getCompanyName"
        :disabled="userStore.identity == '用户' ? true : false"
      ></el-input>
      <el-button type="primary" @click="changeCompanyName">
        编辑公司名称
      </el-button>
    </el-form-item>
    <el-form-item label="公司介绍">
      <el-button type="primary" style="margin: 0" @click="openEditor(1)">
        编辑公司介绍
      </el-button>
    </el-form-item>
    <el-form-item label="公司架构">
      <el-button type="primary" style="margin: 0" @click="openEditor(2)">
        编辑公司架构
      </el-button>
    </el-form-item>
    <el-form-item label="公司战略">
      <el-button type="primary" style="margin: 0" @click="openEditor(3)">
        编辑公司战略
      </el-button>
    </el-form-item>
    <el-form-item label="公司高层">
      <el-button type="primary" style="margin: 0" @click="openEditor(4)">
        编辑公司高层
      </el-button>
    </el-form-item>
  </el-form>
  <editorDialog ref="EditorDialogRef" />
</template>

<style scoped lang="scss">
.el-input {
  max-width: 300px;
}

.el-button {
  margin-left: 30px;
}
</style>
